<template>
  <div class="marketfooter">
    <ul class="marketfooter">
      <li>
        <i class="iconfont icon-kefu"></i>
        <span>客服</span>
      </li>
      <li>
        <i class="iconfont icon-shoucang"></i>
        <span>收藏</span>
      </li>
      <li>加入购物车</li>
      <li>购买</li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.marketfooter .iconfont{
  font-size: .24rem;
}
.marketfooter {
    width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 0.01rem solid #999;
  font-weight: 550;
  position: fixed;
  bottom: 0;
  background-color: #fff;
}
.marketfooter li {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.marketfooter li:nth-child(1) {
  width: 0.6rem;
}
.marketfooter li:nth-child(2) {
  width: 65px;
  border-left: 0.01rem solid #999;
  border-right: 0.01rem solid #999;
}
.marketfooter li:nth-child(3){
    flex: 1;
}
.marketfooter li:nth-child(4) {
  width: 1.25rem;
  background-color: rgb(243, 109, 109);
  color: #ffff;
}
</style>